<template>
  <div
    ref="contentRef"
    class="captcha-content display-flex flex-align flex-justify"
    :class="isPassing && 'success'"
    :style
  >
    <slot name="text">
      <core-spine-text>{{ isPassing ? successText : text }}</core-spine-text>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue'
import type { ContentExposes, ContentProps } from './types'

const props = withDefaults(defineProps<ContentProps>(), {
  contentStyle: () => ({}),
  isPassing: false,
  successText: '',
  text: ''
})

const contentRef = useTemplateRef<HTMLDivElement>('contentRef')

const width = ref('100%')

const style = computed(() => ({ ...props.contentStyle, width: width.value }))

const getEl = () => contentRef.value

const setWidth = (val: string) => {
  width.value = val
}

defineExpose<ContentExposes>({
  getEl,
  setWidth
})

defineOptions({
  name: 'CoreCaptchaContent'
})
</script>

<style scoped lang="scss">
.captcha-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
  line-height: 16px;

  &.success {
    -webkit-text-fill-color: hsl(0deg 0% 98%);
  }
}
</style>
